<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apply</title>
    <link rel="stylesheet" href="/static/style.css?v={time()}">
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/element-plus"></script>
    <style>
        .text-center{
            text-align: center;
        }
        .footer{
            font-size: 12px;
            color: #999;
        }
        .flex-inline{
            display: flex;
            align-items: center;
            justify-content: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="common-layout">
            <el-row :gutter="10" justify="center">
                <el-col :md="12">
                    <el-card v-if="showToken" style="width: 100%;margin-top: 100px;">
                        <el-input v-model="token">
                            <template #prepend>TOKEN:</template>
                        </el-input>
                    </el-card>
                    <el-container>
                        <el-card shadow="hover" style="width: 100%; margin-top: 100px;">
                            <template #header>
                                <div class="card-header">
                                    <span>Apply</span>
                                </div>
                            </template>
                            <div class="main">
                                <el-form :rules="rules" ref="formRef" :model="form" label-width="150px" require-asterisk-position="right">
                                    <el-form-item label="username" prop="username">
                                        <el-input v-model="form.username"></el-input>
                                    </el-form-item>
                                    <el-form-item label="password" prop="passwd">
                                        <el-input type="password" v-model="form.passwd" show-password></el-input>
                                    </el-form-item>
                                    <el-form-item label="rePassword" prop="repasswd" :rules="[{ required: true, message: '请再次输入正确的密码!', trigger: 'blur',validator:this.validatePassword }]">
                                        <el-input type="password" v-model="form.repasswd" show-password></el-input>
                                    </el-form-item>
                                    <el-form-item class="flex-inline" label="email" prop="email">
                                        <el-input type="email" v-model="form.email" style="width: 300px;"></el-input>
                                        <el-button type="primary" @click="sendEmail" style="width: 80px;margin-left: 10px;" :loading="loadingBtn" :disabled="disabledBtn">发送验证码</el-button>
                                    </el-form-item>
                                    <el-form-item class="flex-inline" label="邮箱验证码" prop="mail_code">
                                        <el-input v-model="form.mail_code" style="width: 300px;"></el-input>
                                    </el-form-item>
                                    
                                    <!-- 验证码 -->
                                    <el-form-item class="flex-inline" label="验证码" prop="captcha" >
                                        <el-input v-model="form.captcha" style="width: 200px;" ></el-input>
                                        <el-image :src="captcha" @click="getCode" :lazy="true" alt="刷新验证码" @click.stop="getCode" style="width: 200px;margin-left: 10px;" />
                                    </el-form-item>
                                    <el-form-item label="remark" prop="remark" >
                                        <el-input type="textarea" v-model="form.remark"></el-input>
                                    </el-form-item>
                                    <!-- submit -->
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">Create</el-button>
                                        <el-button @click="onCancel">Cancel</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <template #footer>
                                <p class="footer text-center">Powered by JI56</p>
                            </template>
                        </el-card>
                    </el-container>
                </el-col>
            </el-row>
        </div>

    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    form: {
                        username: '',
                        passwd: '',
                        repasswd: '',
                        email: '',
                        remark: '',
                        template: 1,
                        captcha:'',
                        mail_code:''
                    },
                    rules: {
                        username: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        }, {
                            min: 3,
                            max: 50,
                            message: '长度在 3 到 50 个字符',
                            trigger: 'blur'
                        }],
                        passwd: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        }, {
                            min: 6,
                            message: '密码长度不能少于6位',
                            trigger: 'blur'
                        }],
                        email: [{
                            required: true,
                            message: '请输入正确的邮箱地址',
                            trigger: 'blur'
                        },
                        {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                        }],
                        mail_code: [
                            {
                                required: true,
                                message: '请输入邮箱验证码',
                                trigger: 'blur'
                            },
                            {
                                pattern: /^[0-9]*$/,
                                message: '请输入邮箱验证码',
                                trigger: 'blur'
                            },
                            {
                                min: 6,
                                max: 6,
                                message: '邮箱验证码长度为6位',
                                trigger: 'blur'
                            }
                        ],
                        captcha:[
                            {
                                required: true,
                                message: '请输入验证码',
                                trigger: 'blur'
                            }
                        ]
                    },
                    showToken: false,
                    token: '',
                    captcha: '{:captcha_src()}',
                    loadingBtn:false,
                    disabledBtn:false
                };
            },
            methods: {
                validatePassword (rule, value, callback) {
                    if (value !== this.form.passwd) {
                        callback(new Error('两次输入的密码不一致!'));
                    } else {
                        callback();
                    }
                },
                // 获取验证码
                getCode(){
                    this.captcha = '{:captcha_src()}'+'?'+Math.random();
                },
                sendEmail(){
                    // 验证验证码
                    if(this.form.captcha == ''){
                        this.$message({
                            message: '请输入验证码',
                            type: 'warning',
                        })
                        return;
                    }
                    // 填写邮箱
                    if(this.form.email == ''){
                        this.$message({
                            message: '请填写邮箱',
                            type: 'warning',
                        })
                        return;
                    }
                    this.loadingBtn=true;
                    // 发送验证邮件
                    fetch('/check', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            captcha: this.form.captcha,
                            email: this.form.email
                        })
                    }).then(res => res.json())
                    .then(data => {
                        console.log(data);
                        if (data.code == 200) {
                            this.$message({
                                message: '发送成功,请查收邮箱验证码!',
                                type: 'success',
                            })
                            this.disabledBtn = true
                        } else {
                            this.$message({
                                message: data.msg,
                                type: 'warning',
                            })
                        }
                        this.loadingBtn = false
                    })
                    
                },
                onSubmit() {
                    this.$refs.formRef.validate((valid) => {
                        if (!valid) return;
                        fetch('/apply', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(this.form)
                        }).then(res => res.json())
                        .then(data => {
                            console.log(data);
                            if (data.code == 200) {
                                this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                                })
                                this.token = data.data
                                this.showToken = true
                            } else {
                                this.$message.error(data.msg)
                            }
                        });
                    });
                },
                onCancel() {
                    console.log('cancel!');
                },
                mounted() {
                    this.$nextTick(() => {
                        this.formRef = this.$refs.formRef;
                 });
                }
            }
        }).use(ElementPlus).mount("#app");
    </script>
</body>

</html>